import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:io';

//void main() => runApp(MyApp()); // MaterialApp 应用示范

//void main() => runApp(RoutesDemo()); // 路由应用示范

// 主题颜色应用示范
//void main(){
//  runApp(new MaterialApp(
//    title: "主题颜色",
//    theme: ThemeData(
//      //主题色
//      primarySwatch: Colors.blue,
//    ),
//    home: new Scaffold(
//      appBar: AppBar(
//        title: Text("主题颜色"),
//      ),
//      body: Center(
//        child: Text(
//            "主题颜色",
//            style: TextStyle(
//              fontSize: 28.0,
//            ),
//        ),
//      ),
//    )
//  ));
//}

// 脚手架应用示范
//void main(){
//  runApp(new MaterialApp(
//    title: "脚手架",
//    home: new ScaffoldDemo(),
//  ));
//}

// AppBar应用示范
//void main(){
//  runApp(new MaterialApp(
//    title: "AppBar应用示范",
//    home: new AppBarDemo(),
//  ));
//}

// BottomNavigationBar底部导航栏 应用示范
//void main(){
//  runApp(new MaterialApp(
//    title: "BottomNavigationBar底部导航栏应用示范",
//    home: new BottomNavigationPage(),
//  ));
//}

// DefaultTabController 应用示范
//void main(){
//  runApp(new DefaultTabControllerDemo());
//}

// TabBar组件 应用示范
//void main(){
//  runApp(new TabBarDemo());
//}

// MatenalApp示例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "MatenalApp示例",
      home: new MyHomePage(),
    );
  }

}

// 这是一个可改变的Widget
class MyHomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _MyHomePageState();
  }

}

class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("MatenalApp示例"),
      ),
      body: Center(
        child: Text("主页"),
      ),
    );
  }

}

class RoutesDemo extends StatelessWidget{

  // 这是整个应用的主组件
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "Routes 路由",
      home: new MyRoutesPage(),
      routes: {
        "/first":(BuildContext context) => FirstPage(),//添加路由
        "/second":(BuildContext context) => SecondPage(),
      },
      //初始路由页面为first 页面
      initialRoute: "/first",
    );
  }

}

class MyRoutesPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _MyRoutesPageState();
  }

}

class _MyRoutesPageState extends State<MyRoutesPage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text("Routes 路由组件"),
      ),
      body: Center(
        child: Text(
          "主页",
          style: TextStyle(fontSize: 28.0),
        ),
      ),
    );
  }

}

// 第一个路由页面
class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text("这是第一页"),
      ),
      body: Center(
        child: RaisedButton(
            onPressed: (){
              //路由跳转到第二个页面
              Navigator.pushNamed(context, "/second");
            },
            child: Text(
              "这是第一页",
              style: TextStyle(fontSize: 28.0),
            ),
        ),
      ),
    );
  }

}

// 第二个路由页面
class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text("这是第二页"),
      ),
      body: Center(
        child: RaisedButton(
            onPressed: (){
              // 路由跳转到第一个页面
              Navigator.pushNamed(context, "/first");
            },
            child: Text(
              "这是第二页",
              style: TextStyle(fontSize: 28.0),
            ),
        ),
      ),
    );
  }

}

// Scaffold 脚手架组件
class ScaffoldDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final title = "Scaffold 脚手架组件";
    return new Scaffold(
    //头部元素 比如：左侧返回按钮 中间标题 右侧菜单
      appBar: new AppBar(
        title: Center(
          child: Text(title),
        ),
      ),
      //视图内容部分
      body: Center(
        child: Text(title),
      ),
      //底部导航栏部分
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      // 添加 AB 按钮
      floatingActionButton: FloatingActionButton(
          onPressed: (){

          },
          tooltip: "增加",
        child: Icon(Icons.add),
      ),
      // AB 按钮居中
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

}


// AppBar 组件
class AppBarDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("AppBar 组件"),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: null),
          IconButton(icon: Icon(Icons.add), onPressed: null)
        ],
      ),
    );
  }
  
}

// BottomNavigation 底部导航栏组件
class BottomNavigationPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new BottomNavigationPageState();
  }

}

class BottomNavigationPageState extends State<BottomNavigationPage>{

  //当前选中项的索引
  int _selectedIndex = 1;
  final _widgetOptions = [
    Text("Index 0 : 信息"),
    Text("Index 1 : 通讯录"),
    Text("Index 2 : 发现")
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar 组件"),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      //底部导航栏按钮：包括图标和文字
      bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.chat),title: Text("信息")),
            BottomNavigationBarItem(icon: Icon(Icons.contacts),title: Text("通讯录")),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle),title: Text("发现")),
          ],
          //选中项的索引
          currentIndex: _selectedIndex,
          //选中项的颜色
          fixedColor: Colors.deepPurple,
          //选择按下处理
          onTap: _onItemTapped,
      ),
    );
  }

  // 选中按下处理，设置当前索引为 index值
  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });
  }
}


// DefaultTabController 控制器
class DefaultTabControllerDemo extends StatelessWidget{

  //列表项数据
  final List<Tab> myTabs = <Tab>[
    Tab(text: "选项一",),
    Tab(text: "选项二",),
  ];

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: DefaultTabController(
          length: myTabs.length,
          child: Scaffold(
            appBar: AppBar(
              //添加导航栏
              bottom: TabBar(
                tabs: myTabs,
              ),
            ),
            //添加导航视图
            body: TabBarView(
                children: myTabs.map((Tab tab){
                  return Center(child: Text(tab.text));
                }).toList(),
            ),
          )
      ),
    );
  }

}


// TabBar 组件
class TabBarDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      // 添加 DefaultTabController 关类 TabBar 、 TabBarView
      home: new DefaultTabController(
          // 传入选项卡数量
          length: items.length,
          child: new Scaffold(
            appBar: new AppBar(
              title: const Text("TabBar 选项卡示例"),
              bottom: new TabBar(
                  //设置为可以滚动
                  isScrollable: true,
                  tabs: items.map((ItemView item){
                    return new Tab(
                      text: item.title,
                      icon: new Icon(item.icon),
                    );
                  }).toList(),
              ),
            ),
            // 添加选项卡视图
            body: new TabBarView(
                children: items.map((ItemView item){ // 迭代显示选项卡视图
                  return new Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: new SelectedView(item: item,),
                  );
                }).toList(),
            ),
          )
      ),
    );
  }

}

// 视图项数据
class ItemView{
  // 构造方法
  const ItemView({this.title,this.icon});
  // 标题
  final String title;
  // 图标
  final IconData icon;
}

//选项卡的类目
const List<ItemView> items = const <ItemView>[
  const ItemView(title: "自驾",icon: Icons.directions_car),
  const ItemView(title: "自行车",icon: Icons.directions_bike),
  const ItemView(title: "轮船",icon: Icons.directions_boat),
  const ItemView(title: "公交车",icon: Icons.directions_bus),
  const ItemView(title: "火车",icon: Icons.directions_railway),
  const ItemView(title: "步行",icon: Icons.directions_walk),
];

//被选中的视图
class SelectedView extends StatelessWidget{

  const SelectedView({ Key key,this.item }) : super(key: key);

  //视图数据
  final ItemView item;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return new Card(
      color: Colors.white,
      child: new Center(
        child: new Column(
          //垂直方向最小化处理
          mainAxisSize: MainAxisSize.min,
          //水平方向居中对齐
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Icon(
              item.icon,
              size: 128.0,
              color: textStyle.color,
            ),
            new Text(
              item.title,
              style: textStyle,
            )
          ],
        ),
      ),
    );
  }

}


// Drawer 抽屉组件 应用示范
//void main(){
//  runApp(new MaterialApp(
//    home: new DrawerDemo(),
//  ));
//}

// Drawer 抽屉组件
class DrawerDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text("Drawer抽屉组件"),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            //设置用户基本信息：头像、用户名、邮箱
            UserAccountsDrawerHeader(
                accountName: Text("追梦小乐"),
                accountEmail: Text("774003013@qq.com"),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: AssetImage("images/timg.jpg"),
                ),
                onDetailsPressed: (){},
                otherAccountsPictures: <Widget>[
                  new Container(
                    child: Image.asset("images/timg.jpg"),
                  )
                ],
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.color_lens),),
              title: Text("个性装扮"),
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.photo_album),),
              title: Text("我的相册"),
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wifi),),
              title: Text("免流量特权"),
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wallpaper),),
              title: Text("特殊解锁"),
            ),
          ],
        ),
      ),
    );
  }

}

// Drawer 抽屉组件 应用示范
//void main(){
//  runApp(new FloatingActionButtonDemo());
//}

// FloatingActionButton 悬浮按钮组件
class FloatingActionButtonDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "FloatingActionButton 悬浮按钮组件",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("FloatingActionButton 悬浮按钮组件"),
        ),
        body: Center(
          child: Text(
            "FloatingActionButton 悬浮按钮",
            style: TextStyle(fontSize: 28.0),
          ),
        ),
        floatingActionButton: new Builder(builder: (BuildContext context){
          return FloatingActionButton(
              child: const Icon(Icons.add),
              // 提示信息
              tooltip: "请点击 FloatingActionButton",
              //前景色为白色
              foregroundColor: Colors.white,
              //背景色为蓝色
              backgroundColor: Colors.blue,
              //未点击阴影值
              elevation: 7.0,
              //点击阴影值
              highlightElevation: 14.0,
              onPressed: (){
                Scaffold.of(context).showSnackBar(new SnackBar(
                    content: Text("你点击了FloatingActiongButton")),
                );
              },
              mini: false,
              //圆形边
              shape: CircleBorder(),
              isExtended: false,
          );
        }),
        //居中放置
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }

}


// FlatButton 扁平按钮组件 应用示范
//void main(){
//  runApp(new FlatButtonDemo());
//}

// FlatButton 扁平按钮组件
class FlatButtonDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("FlatButton 扁平按钮组件"),
          centerTitle: true,
        ),
        body: Center(
          child: FlatButton(
              onPressed: (){}, 
              child: Text(
                  "FlatButton",
                  style: TextStyle(fontSize: 28),
              ))
        ),
      ),
    );
  }

}


// PopupMenuButton 弹出菜单组件 应用示范
//void main(){
//  runApp(new PopupMenuButtonDemo());
//}

// 菜单项
enum ConferenceItem{AddMember,LockConference,ModifyLayout,TurnoffAll}

// PopupMenuButton 弹出菜单组件
class PopupMenuButtonDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("PopupMenuButton 弹出菜单组件"),
          centerTitle: true,
        ),
        body: Center(
          child: FlatButton(
              onPressed: (){},
              child: PopupMenuButton<ConferenceItem>(
                  onSelected: (ConferenceItem result){},
                  //菜单项构造器
                  itemBuilder: (BuildContext context) => <PopupMenuEntry<ConferenceItem>>[
                    //菜单项
                    const PopupMenuItem<ConferenceItem>(
                        value: ConferenceItem.AddMember,
                        child: Text("添加成员"),
                    ),

                    const PopupMenuItem<ConferenceItem>(
                      value: ConferenceItem.LockConference,
                      child: Text("锁定会议"),
                    ),

                    const PopupMenuItem<ConferenceItem>(
                      value: ConferenceItem.ModifyLayout,
                      child: Text("修改布局"),
                    ),

                    const PopupMenuItem<ConferenceItem>(
                      value: ConferenceItem.TurnoffAll,
                      child: Text("挂断所有"),
                    ),

                  ]
              )
          ),
        ),
      ),
    );
  }

}

// SimpleDialog 简单对话框组件 应用示范
//void main(){
//  runApp(new SimpleDialogDemo());
//}

// SimpleDialog 简单对话框组件
class SimpleDialogDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("SimpleDialog 简单对话框组件"),
          centerTitle: true,
        ),
        body: Center(
          child: SimpleDialog(
            title: const Text("对话框标题"),
            children: <Widget>[
              SimpleDialogOption(
                onPressed: (){},
                child: const Text("第一行信息"),
              ),
              SimpleDialogOption(
                onPressed: (){},
                child: const Text("第二行信息"),
              ),
            ],
          ),
        ),
      ),
    );
  }

}


// AlertDialog 提示对话框组件 应用示范
//void main(){
//  runApp(new AlertDialogDemo());
//}

// AlertDialog 提示对话框组件
class AlertDialogDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("AlertDialog 提示对话框组件"),
          centerTitle: true,
        ),
        body: Center(
          child: AlertDialog(
            //提示框标题
            title: Text("提示"),
            //提示框内容
            content: SingleChildScrollView(
              child: ListBody(
                children: <Widget>[
                  Text("是否要删除？"),
                  Text("一旦删除数据不可恢复！")
                ],
              ),
            ),
            actions: <Widget>[
              FlatButton(
                  onPressed: (){},
                  child: Text("确定")
              ),
              FlatButton(onPressed: (){}, child: Text("取消"))
            ],
          ),
        ),
      ),
    );
  }

}

// SnackBar 轻量提示组件 应用示范
//void main(){
//  runApp(new SnackBarDemo());
//}

// SnackBar 轻量提示组件
class SnackBarDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("SnackBar 轻量提示组件"),
          centerTitle: true,
        ),
        body: Center(
          child: Text(
            "SnackBar 轻量提示组件",
            style: TextStyle(fontSize: 28.0),
          ),
        ),
        floatingActionButton: new Builder(builder: (BuildContext context){
          return new FloatingActionButton(
              child: const Icon(Icons.add),
              onPressed: (){
                Scaffold.of(context).showSnackBar(new SnackBar(content: Text("显示SncakBar")));
              },
              shape: CircleBorder(),
              );
        }),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      ),
    );
  }

}

// TextField 文本框组件 应用示范
//void main(){
//  runApp(new TextFieldDemo());
//}

// TextField 文本框组件
class TextFieldDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 添加文本编辑控制器  监听文本输入内容变化
    final TextEditingController controller = TextEditingController();
    controller.addListener((){
      print("你输入的内容为 : ${controller.text}");
    });
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("TextField 文本框组件"),
          centerTitle: true,
        ),
        body: Center(
          child: Padding(
              padding: const EdgeInsets.all(20.0),

              child: TextField(
                //绑定controller
                controller: controller,
                //最大长度
                maxLength: 30,
                //最大行数
                maxLines: 1,
                //是否自动对焦
                autofocus: true,
                //是否是密码
                obscureText: false,
                //文本对齐样式
                style: TextStyle(fontSize: 26.0,color: Colors.green),
                //文本内容改变时回调
                onChanged: (text){
                  print("文本内容改变时回调 $text");
                },
                //内容提交时回调
                onSubmitted: (text){
                  print("文本内容改变时回调 $text");
                },
                //是否禁用
                enabled: true,
                //添加装饰效果
                decoration: InputDecoration(
                  //添加灰色填充
                  fillColor: Colors.grey.shade200,
                  filled: true,
                  helperText: "用户名",
                  //左侧图标
                  prefixIcon: Icon(Icons.person),
                  //右侧文本提示
                  suffixText: "用户名"

                ),
              ),
          ),
        ),
      ),
    );
  }

}

//  Card 卡片组件 应用示范
void main(){
  runApp(new CardDemo());
}

// Card 卡片组件
class CardDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    var card = new SizedBox(
      height: 250.0,
      child: new Card(
        child: new Column(
          children: <Widget>[
            new ListTile(
              title: Text("广州市天河区科韵路"),
              subtitle: Text("德生有限公司"),
              leading: Icon(
                Icons.home,
                color: Colors.lightBlue,
              ),
            ),
            new Divider(),
            new ListTile(
              title: Text("广州市天河区科韵路"),
              subtitle: Text("酷狗公司"),
              leading: Icon(
                Icons.compare,
                color: Colors.lightBlue,
              ),
            ),
            new Divider(),
          ],
        ),
      ),
    );

    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Card 卡片组件"),
          centerTitle: true,
        ),
        body: Center(
          child: card,
        ),
      ),
    );
  }

}